<template>
    <section>
        <div class="servic-render">
            <h1 class="render-tit">
                热门公众号
            </h1>
            <ul class="mui-table-view mui-grid-view mui-table-view-border render-table">
                <li class="mui-table-view-cell mui-media mui-col-xs-6 render-cell" v-for="item in list" :key="item.id" :title="item.name">
                    <a class="cell__href" href="javascript:;" v-bind:data-hotUrl="item.href">
                        <i class="render-icon render-icon__tuniu" :style="objStyle(item.image)"></i>
                        <p class="render-text mui-ellipsis-2">{{item.name}}</p>
                    </a>
                </li>
            </ul>
        </div>
    </section>

</template>
<script>
    export default {
        data() {
            return {

            }
        },
        replace: true,
        props: {
            list: Array
        },
        mounted() {

        },
        methods: {
            objStyle:function(obj){
                let styleObject = {}
                styleObject.backgroundImage = `url(${obj})`
                styleObject.backgroundSize = 'contain'
                return styleObject;
            }
        }
    };

</script>
<style>

</style>